const path = require('path')
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  publicPath: './',
    lintOnSave: true,
    css: { 
      loaderOptions: {
        postcss: {
          plugins: [
            require('postcss-plugin-px2rem')({
              // remUnit: 75,
              // exclude: /(node_module)/,
              rootValue:37.5,      // 新版本的是这个值
              mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
              minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
              // exclude: '/node_modules/i'
            }),
          ]
        }
      }
    },
    configureWebpack: {

      plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        
        // 下面是下载的插件的配置
        new CompressionWebpackPlugin({
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8
        }),
        new webpack.optimize.LimitChunkCountPlugin({
          maxChunks:20, 
          minChunkSize: 100
        })],
    },
    chainWebpack: (config) => {
      /* 添加分析工具*/
      if (process.env.NODE_ENV === 'production') {
          if (process.env.npm_config_report) {
              config
                  .plugin('webpack-bundle-analyzer')
                  .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                  .end();
              config.plugins.delete('prefetch')
          }
      }
      config.plugin('preload').tap(() => [
        {
          rel: 'preload',
          // to ignore runtime.js
          // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
          fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
          include: 'initial'
        }
      ])
  
      // when there are many pages, it will cause too many meaningless requests
      config.plugins.delete('prefetch')
  
      // set svg-sprite-loader
      config.module
        .rule('svg')
        .exclude.add(resolve('src/icons'))
        .end()
      config.module
        .rule('icons')
        .test(/\.svg$/)
        .include.add(resolve('src/icons'))
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
          symbolId: 'icon-[name]'
        })
        .end()
  
      config
        .when(process.env.NODE_ENV !== 'development',
          config => {
            config
              .plugin('ScriptExtHtmlWebpackPlugin')
              .after('html')
              .use('script-ext-html-webpack-plugin', [{
              // `runtime` must same as runtimeChunk name. default is `runtime`
                inline: /runtime\..*\.js$/
              }])
              .end()
            config
              .optimization.splitChunks({
                chunks: 'all',
                cacheGroups: {
                  libs: {
                    name: 'chunk-libs',
                    test: /[\\/]node_modules[\\/]/,
                    priority: 10,
                    chunks: 'initial' // only package third parties that are initially dependent
                  },
                  elementUI: {
                    name: 'chunk-vantUI', // split elementUI into a single package
                    priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                    test: /[\\/]node_modules[\\/]_?vant(.*)/ // in order to adapt to cnpm
                  },
                  commons: {
                    name: 'chunk-commons',
                    test: resolve('src/components'), // can customize your rules
                    minChunks: 3, //  minimum common number
                    priority: 5,
                    reuseExistingChunk: true
                  }
                }
              })
            // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
            config.optimization.runtimeChunk('single')
          }
        )
    }
  }
  // module.exports = {
  //   lintOnSave: true,
  //   css: {
  //     loaderOptions: {
  //       postcss: {
  //         plugins: [
  //           require('postcss-plugin-px2rem')({
  //             rootValue:75,      // 新版本的是这个值
  //             mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
  //             minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
  //             // exclude: /(node_module)/,
  //           }),
  //         ]
  //       }
  //     }
  //   },
  //   publicPath: "./", //打包时加上
  //   chainWebpack: (config) => {
  //     /* 添加分析工具*/
  //     if (process.env.NODE_ENV === 'production') {
  //         if (process.env.npm_config_report) {
  //             config
  //                 .plugin('webpack-bundle-analyzer')
  //                 .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  //                 .end();
  //             config.plugins.delete('prefetch')
  //         }
  //     } }
  // }